import React from 'react';
import { Table } from 'antd';
import moment from 'moment';
import router from 'umi/router';

class ServiceInfor extends React.Component {
  state = {};

  render() {
    const { serDto } = this.props;
    // const columns = [
    //   {
    //     title: '险种',
    //     dataIndex: 'assName',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //     width: '25%',
    //   },
    //   {
    //     title: '申报工资',
    //     dataIndex: 'decWage',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //     width: '25%',
    //   },
    //   {
    //     title: '缴费方式',
    //     dataIndex: 'payFlag',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //     width: '25%',
    //   },

    //   {
    //     title: '政策组合',
    //     dataIndex: 'grpName',
    //     onHeaderCell: () => ({
    //       style: {
    //         fontWeight: 'bold',
    //       },
    //     }),
    //     width: '25%',
    //     // eslint-disable-next-line consistent-return
    //     render: (_, record) => {
    //       if (+record.ass !== 1) {
    //         return (
    //           <a
    //             onClick={() =>
    //               router.push(
    //                 `/more/policyprotect/${record.ass !== 2 ? 'detail' : 'foundDetail'}?${
    //                   record.ass !== 2 ? 'insLsPkgId' : 'accuLsPkgId'
    //                 }=${record.grpId}&areaId=${record.areaId}`
    //               )
    //             }
    //           >
    //             {record.grpName}
    //           </a>
    //         );
    //       }
    //     },
    //   },
    // ];
    const columns = [
      {
        title: '险种',
        dataIndex: 'assName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        fixed: 'left',
        render: val => val || '--',
      },
      {
        title: '业务开始日期',
        dataIndex: 'beginDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '业务结束日期',
        dataIndex: 'endDate',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        fixed: 'left',
        render: val => (val ? moment(val).format('YYYY-MM-DD') : '--'),
      },
      {
        title: '缴费方式',
        dataIndex: 'payWayName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        align: 'left',
        render: val => val || '--',
      },
      {
        title: '缴费账户',
        dataIndex: 'accoName',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        align: 'left',
        render: val => val || '--',
      },
      {
        title: '申报工资',
        dataIndex: 'decWage',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业基数',
        dataIndex: 'entpBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人基数',
        dataIndex: 'perBase',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业比例(%)',
        dataIndex: 'entpProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人比例(%)',
        dataIndex: 'perProp',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },

      {
        title: '企业附加(元)',
        dataIndex: 'entpAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',

        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人附加(元)',
        dataIndex: 'perAddnAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '企业缴费',
        dataIndex: 'entpPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '个人缴费',
        dataIndex: 'perPay',
        onHeaderCell: () => ({ style: { fontWeight: 'bold' } }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '缴纳金额',
        dataIndex: 'payAmo',
        onHeaderCell: () => ({ style: { fontWeight: 'bold'} }),
        align: 'left',
        render: val => (val === 0 ? 0 : (val && val) || '--'),
      },
      {
        title: '政策组合',
        dataIndex: 'grpName',
        onHeaderCell: () => ({
          style: {
            fontWeight: 'bold',
          },
        }),
        // eslint-disable-next-line consistent-return
        render: (_, record) => {
          if (+record.ass !== 1) {
            return (
              <a
                onClick={() =>
                  router.push(
                    `/more/policyprotect/${record.ass !== 2 ? 'detail' : 'foundDetail'}?${
                      record.ass !== 2 ? 'insLsPkgId' : 'accuLsPkgId'
                    }=${record.grpId}&areaId=${record.areaId}&hshdRegFlag=${record.hshdRegFlag}`
                  )
                }
              >
                {record.grpName}
              </a>
            );
          }
        },
      }
    ];

    return (
      <div>
        <Table
          columns={columns}
          dataSource={serDto && serDto.detailSerDtos}
          rowKey={record => record.ass}
          size="default"
          style={{ width: '100%' }}
          pagination={false}
          scroll={{ x: 2000, y: 340 }}
        />
      </div>
    );
  }
}

export default ServiceInfor;
